<template>
  <div>
    <div class="top">
      <van-nav-bar
        title="个人资料修改"
        left-text="返回"
        left-arrow
        @click-left="onClickLeft"
      />
    </div>

    <!-- 资料 -->
    <div class="ziliao">
      <ul class="uls">
        <li class="uploadfile">
          <div class="titl">头像</div>
          <div class="upload">
            <van-uploader :after-read="afterRead" preview-size="100vw" />
          </div>
          <div class="photo">
            <img :src="list.url" alt="" />
          </div>
        </li>

        <li @click="show = true">
          <div class="titl">昵称</div>
          <div class="cont">{{ list.nickname }}</div>

          <van-overlay :show="show" @click="show = false">
            <!-- <div class="wrapper">
              <div class="block" />
            </div> -->
            <div class="content">
              <van-form @submit="onSubmit">
                <van-field
                  v-model="userifon.username"
                  name="user"
                  placeholder="请填写用户名"
                />
                <div style="margin: 5px" class="but">
                  <van-button round block @click="show = false" @click.stop
                    >取消</van-button
                  >
                  <van-button
                    round
                    block
                    type="info"
                    native-type="submit"
                    @click="show = false"
                    @click.stop
                    >确定</van-button
                  >
                </div>
              </van-form>
            </div>
          </van-overlay>
        </li>

        <li>
          <div class="titl">性别</div>
          <div class="cont2">
            <van-radio-group v-model="radio" direction="horizontal">
              <van-radio name="1" shape="square">男</van-radio>
              <van-radio name="2" shape="square">女</van-radio>
            </van-radio-group>
          </div>
        </li>
        <!-- 手机号 -->
        <li @click="phone">
          <div class="titl">手机号</div>
          <div class="cont3">{{ list.phoneNumber }}</div>
        </li>
        <!-- 微信登录 -->
        <li>
          <div class="titl">微信登录</div>
          <div class="cont3">未绑定</div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { mapState, mapActions, mapMutations } from "vuex";
export default {
  data() {
    return {
      show: false,
      radio: "1",

      userifon: {
        username: "",
        img: "",
      },
    };
  },

  created() {
    this.init();
  },

  computed: {
    ...mapState("xin", ["list"]),
  },

  methods: {
    // ...mapMutations("xin", ["afterRead"]),
    ...mapActions("xin", ["init"]),

    onClickLeft() {
      this.$router.go(-1);
    },

    // afterRead(file) {
    // },

    //  图片
    async afterRead(file) {
      // 文件上传至服务器
      const fromdata = new FormData();
      fromdata.append("file", file.file);
      fromdata.append("id", 1);
      const res = await axios.post("/user/updateUserAvatar", fromdata);
      this.list.url = res.data;
    },

    onSubmit(values) {
      if (values.user != "") {
        this.list.nickname = values.user;
      }
    },
    phone() {
      console.log("点击了手机号");
    },
  },
};
</script>

<style lang="scss" scoped>
.top {
  .van-nav-bar {
    ::v-deep .van-icon {
      color: #333333;
    }
    ::v-deep .van-nav-bar__text {
      color: #333333;
    }
  }
}
.ziliao {
  width: 100%;
  height: 5rem;
  box-sizing: border-box;
  padding: 0 0.08rem 0 0.08rem;
  .uls {
    width: 100%;
    height: 100%;
    .uploadfile {
      overflow: hidden;
      position: relative;
    }
    .upload {
      position: absolute;
      opacity: 0;
    }
    li {
      width: 100%;
      height: 75px;
      line-height: 75px;
      box-sizing: border-box;
      padding: 0 0.5rem 0 0.5rem;
      border-bottom: 2px rgb(210, 210, 210) solid;
      display: flex;
      justify-content: space-between;
      .content {
        width: 5.5rem;
        height: 2.9rem;
        box-sizing: border-box;
        padding: 20px;
        position: absolute;
        left: 0;
        top: 0;
        right: 0;
        bottom: 0;
        margin: auto;
        background: #fff;
        border-radius: 10px;
      }

      .but {
        display: flex;
      }
      .titl {
        font-size: 18px;
        color: rgba(16, 16, 16, 100);
      }
      .photo {
        width: 48px;
        height: 48px;
        margin-top: 0.3rem;
        border-radius: 0.04rem;
        img {
          width: 100%;
          height: 100%;
          z-index: 1;
          border-radius: 0.04rem;
        }
      }
      .cont2 {
        margin-top: 26px;
        .van-radio--horizontal {
          margin-right: 0px;
        }
      }
    }
  }
}
</style>
